{% extends 'layout.html' %}
{% load staticfiles %}
{% block css %}
    <link rel="stylesheet" href="{% static "/ztree/css/bootstrapStyle/bootstrapStyle.css" %}" type="text/css">
    <style>
        .span-title {
            display: inline-block;
            padding-bottom: 15px;
            width: 70px;
            font-size: 16px;
            color: #868e96;
        }

        .redstar::after {
            content: '*';
            color: red;
        }

        #td_textarea {
            display: block;
            width: 100%;
            height: 40px;
            border: none;
        }

        table, table th, tbody, tbody td {
            border: 3px solid #eaeaea;
        }
    </style>
{% endblock %}
{% block content %}

    <section id="main-content">
        <div class="row">

            <div class="col-lg-12">


                <div class="card card-default">
                    <div class="card-header card-header-border-bottom">
                        <input type="hidden" id="api_id" value="{{ api_auto.id }}">
                        <h2>{{ api_auto.name }}
                            <button type="button" class="btn btn-primary btn-default "
                                    style="right: 120px;position: absolute"
                                    data-target="#apicaseeditForm" data-toggle="modal">编辑

                            </button>
                            <button type="button" class="btn btn-primary btn-default " onclick="api_auto_save()"
                                    style="right: 50px;position: absolute">保存
                            </button>
                        </h2>

                    </div>

                    <div class="card-body">
                        <div class="row">
                            {#基本信息#}
                            <div class="input-group input-group-default">
                                <div class="col-sm-2">
                                    <label for="fname" class="span-title"> 创建者</label>
                                    <label id="api_creator">{{ api_auto.creator }}</label>
                                </div>
                                <div class="col-sm-2">
                                    <label for="fname" class="span-title">优先级</label>
                                    <label id="api_creator">{{ api_auto.get_priority_display }}</label>
                                </div>
                                <div class="col-sm-3">
                                    <label for="fname" class="span-title">创建时间</label>
                                    <label id="api_creator">{{ api_auto.create_time }}</label>
                                </div>
                                <div class="col-sm-3">
                                    <label for="fname" class="span-title">修改时间</label>
                                    <label id="api_creator">{{ api_auto.update_time }}</label>
                                </div>
                                <div class="col-sm-2">
                                    <label for="fname" class="span-title">修改者</label>
                                    <label id="api_creator">{{ api_auto.u_creator }}</label>
                                </div>
                            </div>
                            <div class="col-lg-12">
                                <div class="card">
                                    <div class="card-body p-b-0 ">
                                        <!-- Nav tabs -->
                                        <ul class="nav nav-tabs customtab2" role="tablist">
                                            <li class="nav-item">
                                                <a class="nav-link active show" data-toggle="tab"
                                                   href="#test_step" role="tab" aria-selected="true">
                                                    <span class="hidden-xs-down">测试步骤</span></a>
                                            </li>
                                            <li class="nav-item">
                                                <a class="nav-link" data-toggle="tab"
                                                   href="#test_report" role="tab" aria-selected="false">
                                                    <span class="hidden-xs-down">测试报告</span></a></li>
                                        </ul>
                                        <!-- Tab panes -->
                                        <div class="tab-content">
                                            <div class="tab-pane  p-20 active show form-group" id="test_step"
                                                 role="tabpanel">
                                                <div class="card-body">
                                                    <div class="col-lg-12" style="display:block; font-size: 17px;">
                                                        <span id="step_count"></span>
                                                        <span>个步骤</span>
                                                    </div>
                                                    <div id="table_step">
                                                        {% for case in case_list %}
                                                            <div class="col-lg-12 list-group-item "
                                                                 style="display:block; font-size: 17px;background: rgba(86,87,88,0.04)">
                                                                {% if case.method == "GET" %}
                                                                    <span style="font-weight: bold;color: pink">{{ case.method }}</span>
                                                                {% elif case.method == "POST" %}
                                                                    <span style="font-weight: bold;color: darkblue">{{ case.method }}</span>
                                                                {% elif case.method == "PUT" %}
                                                                    <span style="font-weight: bold;color: springgreen">{{ case.method }}</span>
                                                                {% elif case.method == "DELETE" %}
                                                                    <span style="font-weight: bold;color: green">{{ case.method }}</span>
                                                                {% endif %}
                                                                <span>      {{ case.api_name }}</span><input
                                                                    class="step_id" hidden=""
                                                                    value="{{ case.id }}"><span>（{{ case.case_name }}）</span><span
                                                                    style="color: #9e9d24">{{ case.interface }}</span>
                                                                <button onclick="step_del(this)"
                                                                        style="float:right;padding: 0px"
                                                                        class="btn btn-pink ti-close"></button>
                                                            </div>

                                                        {% endfor %}
                                                    </div>
                                                    <div class="col-lg-12 btn btn-primary glyphicon glyphicon-plus"
                                                         data-target="#stepaddForm" data-toggle="modal">+ 添加步骤
                                                    </div>
                                                </div>


                                            </div>
                                            <div class="tab-pane  p-20  form-group" id="test_report"
                                                 role="tabpanel">
                                                <div class="card-body">
                                                    <table class="table">
                                                        <thead>
                                                        <tr>
                                                            <th>用例名称</th>
                                                            <th>结果</th>
                                                            <th>状态</th>
                                                            <th>测试时间</th>
                                                            <th>测试人</th>
                                                            <th style="text-align: center">操作</th>
                                                        </tr>
                                                        </thead>
                                                        <tbody>
                                                        {% for report in report_list %}
                                                            <tr>
                                                                <th>{{ report.title }}</th>
                                                                <th>
                                                                    <div class="progress" style="height: 30px;">
                                                                        <div class="progress-bar bg-success"
                                                                             role="progressbar"
                                                                             style="width: {{ report.pass_rate }}%"
                                                                             aria-valuenow="{{ report.pass_rate }}"
                                                                             aria-valuemin="0" aria-valuemax="100"
                                                                             data-toggle="tooltip" data-placement="top"
                                                                             title="{{ report.success_count }} / {{ report.test_all_count }} passed">{{ report.pass_rate }}%
                                                                        </div>
                                                                    </div>
                                                                </th>
                                                                <th>
                                                                    {% if report.status == 1 %}
                                                                        <span class="badge badge-success ">已完成</span>
                                                                    {% else %}
                                                                        <span class="badge badge-pink ">运行中</span>
                                                                    {% endif %}

                                                                </th>
                                                                <th>{{ report.create_time }}</th>
                                                                <th>{{ report.tester }}</th>
                                                                <th style="text-align: center">
                                                                    <a onclick="test_report_show({{ report.report_id }})"
                                                                       style="color: #9373ee; font-size: 14px; cursor: pointer;">查看</a>
                                                                    <a href="{% url "reports:test_report_download" %}?report_id={{ report.report_id }}"
                                                                       style="color: #9373ee; font-size: 14px;margin-left: 0.5rem; cursor: pointer">导出</a>
                                                                    <a onclick="test_report_del(this, {{ report.report_id }})"
                                                                       style="color: #9373ee; font-size: 14px;margin-left: 0.5rem; cursor: pointer;">删除</a>
                                                                </th>
                                                            </tr>
                                                        {% endfor %}

                                                        </tbody>
                                                    </table>
                                                </div>


                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                        </div>

                    </div>
                </div>
            </div>
        </div>
        <div class="modal fade" id="apicaseeditForm" tabindex="-1" role="dialog"
             aria-labelledby="exampleModalFormTitle" aria-hidden="true">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalFormTitle">编辑测试用例</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>

                    <div class="modal-body">
                        <form>
                            <div class="form-group">
                                <label for="api_case_name" class="redstar">用例名称</label>
                                <input type="text" class="form-control" id="edit_api_case_name" name="api_case_name"
                                       placeholder="请输入用例名称" value="{{ api_auto.name }}">
                            </div>
                            <div class="form-group">
                                <label for="api_case_priority" class="redstar">优先级</label>
                                <select id="edit_api_case_priority" class="form-control" name="api_case_priority">
                                    <option value="0">P0</option>
                                    <option value="1">P1</option>
                                    <option value="2">P2</option>
                                    <option value="3">P3</option>

                                </select>
                            </div>
                            <div class="form-group">
                                <label for="api_case_describe">说明</label>
                                <textarea class="form-control" id="edit_api_case_describe" name="api_case_describe"
                                          style="height: 100px"
                                          placeholder="请输入说明">{{ api_auto.describe }}</textarea>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-danger btn-pill" data-dismiss="modal">Close
                                </button>
                                <button type="button" class="btn btn-danger "
                                        onclick="api_auto_edit({{ api_auto.id }})">Save Changes
                                </button>

                            </div>

                        </form>
                    </div>
                </div>
            </div>
        </div>
        <div class="modal fade" id="stepaddForm" tabindex="-1" role="dialog"
             aria-labelledby="exampleModalLabel"
             aria-hidden="true">
            <div class="modal-dialog" role="document">
                <div class="modal-content" style="width: 120%">
                    <div class="modal-header">
                        <h5 class="modal-title">添加步骤</h5>
                        <button type="button" class="close" data-dismiss="modal"
                                aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>

                    <div class="modal-body p-4" id="add_case">


                        <div class="form-group">
                            <ul id="treeDemo" class="ztree"></ul>
                        </div>


                    </div>

                    <div class="modal-footer">
                        <button type="button" class="btn btn-danger btn-pill" data-dismiss="modal">Close
                        </button>
                        <button type="button" class="btn btn-danger btn step_add">
                            Save Changes
                        </button>
                    </div>

                </div>
            </div>
        </div>
    </section>

{% endblock %}
{% block js %}
    <script>
        function test_report_show(report_id) {
            swal({
                title: "准备自动跳转报告页面",
                timer: 1500,
                showConfirmButton: false,
            });
            var timer = setTimeout(() => {
                window.open("{% url "apitests:report_show" %}" + "?report_id=" + report_id)
                clearTimeout(timer)
            }, 1000)
        }
    </script>
    {#删除#}
    <script>
        function test_report_del(obj, report_id) {
            console.log(report_id)
            swal(
                {
                    title: "您确定要删除这个报告吗 ?",
                    type: "warning",
                    showCancelButton: true,
                    confirmButtonColor: "#DD6B55",
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    closeOnConfirm: false,
                    closeOnCancel: false,
                },
                function (isConfirm) {
                    if (isConfirm) {
                        $.ajax({
                            url: "{% url 'reports:test_report_del' %}",
                            type: "POST",
                            data: {"report_id": report_id},
                            beforeSend: function (xhr) {
                                xhr.setRequestHeader("X-CSRFToken", "{{ csrf_token }}");
                            },
                            success: function (data) {
                                if (data.status) {
                                    swal({
                                        title: '删除成功',
                                        timer: 1000,
                                        showConfirmButton: false,
                                    });
                                    var reprent = obj.parentNode.parentNode;
                                    reprent.remove();
                                }
                            }
                        })

                    } else {
                        swal({
                            title: "Sweet auto close alert !!",
                            timer: 0.5,
                            showConfirmButton: false,
                        });
                    }
                }
            );
        }

    </script>
    <script>
        function api_auto_edit(api_auto_id) {
            var api_case_name = $('#edit_api_case_name').val()
            var api_case_priority = $('#edit_api_case_priority').val()
            var api_case_describe = $('#edit_api_case_describe').val()
            alert(api_case_describe)
            $.ajax({
                url: "{% url "apitests:api_auto_edit" %}",
                type: "POST",
                data: {
                    "api_auto_id": api_auto_id,
                    "api_case_name": api_case_name,
                    "api_case_priority": api_case_priority,
                    "api_case_describe": api_case_describe,
                },
                beforeSend: function (xhr) {
                    xhr.setRequestHeader("X-CSRFToken", "{{ csrf_token }}");
                },
                success: function (data) {
                    if (data.status) {
                        swal({
                            title: "修改成功",
                            timer: 1000,
                            showConfirmButton: false,
                        });
                        var timer = setTimeout(() => {
                            window.location.reload();
                            clearTimeout(timer)
                        }, 1000)
                    } else {
                        swal({
                            title: "数据有误",
                            timer: 1000,
                            showConfirmButton: false,
                        });
                    }
                }
            })
        }
    </script>

    <script>
        function api_auto_save() {
            var array = new Array()
            $('.step_id').each(function () {
                array.push(parseInt($(this).val()))
            })
            var api_id = $('#api_id').val()
            console.log(parseInt(api_id))
            $.ajax({
                url: "{% url "apitests:api_step_save" %}",
                type: "POST",
                data: {
                    "api_id": parseInt(api_id),
                    "step_id": JSON.stringify(array)
                },
                beforeSend: function (xhr, settings) {
                    xhr.setRequestHeader("X-CSRFToken", "{{ csrf_token }}");
                },
                success: function (data) {
                    if (data.status) {
                        swal({
                            title: "保存成功",
                            timer: 1000,
                            showConfirmButton: false,
                        });
                        var timer = setTimeout(() => {
                            window.location.href = "{% url "apitests:api_case_auto" %}"
                            clearTimeout(timer)
                        }, 1000)
                    }
                }
            })
        }
    </script>

    <script type="text/javascript">

        var zTreeObj;
        var setting = {
            view: {
                selectedMulti: false
            },
            check: {
                enable: true
            },
            data: {
                simpleData: {
                    enable: true
                }
            },

        };
        var project_id = {{ project_id }};
        $(document).ready(function () {
            $.ajax({
                url: "{% url 'apitests:get_case_tree'%}",
                type: "GET",
                data: {"project_id": project_id},
                success: function (data) {
                    if (data.status === 10200) {
                        var zNodes = data.data;
                        zTreeObj = $.fn.zTree.init($("#treeDemo"), setting, zNodes);
                        zTreeObj.expandAll(false);  //设置默认展开
                    }

                }

            })
        });


    </script>

    <script>
        function step_del(obj) {
            //找die
            var reprent = obj.parentNode;
            reprent.remove();
            var step_id = document.getElementsByClassName("step_id");
            var mySpan = document.getElementById("step_count");
            mySpan.innerHTML = step_id.length;
        }
    </script>
    <script>
        document.querySelector('.step_add').onclick = function () {
            var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
            var nodes = treeObj.getCheckedNodes(true);
            var cases = new Array();
            first_html = '<div class="col-lg-12 list-group-item " ' +
                'style="display:block; font-size: 17px;background: rgba(86,87,88,0.04)">'
            end_html = '</span>' +
                '<button onclick="step_del(this)" style="float:right;padding: 0px"class="btn btn-pink ti-close">' +
                '</button></div>'
            for (var i = 0; i < nodes.length; i++) {
                if (nodes[i].isParent == false) {
                    if (nodes[i].method == 'GET') {
                        color_html = '<span style="font-weight: bold;color: pink">'
                    }
                    if (nodes[i].method == 'POST') {
                        color_html = '<span style="font-weight: bold;color:darkblue">'
                    }
                    if (nodes[i].method == 'PUT') {
                        color_html = '<span style="font-weight: bold;color:springgreen">'
                    }
                    if (nodes[i].method == 'DELETE') {
                        color_html = '<span style="font-weight: bold;color:green">'
                    }
                    second_html = nodes[i].method + '</span>' +
                        '<span>      ' + nodes[i].api_define_name + '</span><input class="step_id" hidden value="' + nodes[i].id + '">' +
                        '<span>（' + nodes[i].name + '）</span><span style="color: #9e9d24">' + nodes[i].url
                    cases.push(nodes[i].id);
                    console.log(nodes[i])
                    var son = document.createElement('div')
                    son.innerHTML = first_html + color_html + second_html + end_html
                    document.getElementById('table_step').appendChild(son)
                }
            }
            treeObj.checkAllNodes(false);
            $('#stepaddForm').modal('hide')
            var step_id = document.getElementsByClassName("step_id");
            var mySpan = document.getElementById("step_count");
            mySpan.innerHTML = step_id.length;

        }
    </script>
    <script>
        window.onload = function () {
            $('#add_api_case_priority').val({{ api_auto.priority }});
            var mySpan = document.getElementById("step_count");
            mySpan.innerHTML = "{{ case_list|length }}";
        }

    </script>
    <script>
        $(document).ready(function () {
            $('[data-toggle="tooltip"]').tooltip();
        });
    </script>
{% endblock %}